<template>
    <div class="frame">
        <!-- <el-row>
            <el-cascader v-model="selectCur" :options="options" :show-all-levels="false" @change="onchange" />
        </el-row> -->
        <el-tabs v-model="selectCur" type="card" class="demo-tabs" @tab-click="onchange">
            <template v-for="item in tabpanes">
                <el-tab-pane :label="item.label" :name="item.value"></el-tab-pane>
            </template>
        </el-tabs>

        <div class="echart">
            <div ref="chartDom"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useEcharts } from '@/hooks';
import * as chartOptions from './data'
import { TabsPaneContext } from 'element-plus';

interface Some {
    [x: string]: any
}

const selectCur = ref('stackedBarChart')
const onchange = (pane: TabsPaneContext) => {
    // const name = value[value.length - 1];
    // console.log(111, value, name)
    pane.paneName && setOption((chartOptions as Some)[pane.paneName], true);
}

const tabpanes = [
    {
        value: 'basicLineChart',
        label: '基础折线图',
    },
    {
        value: 'basicBarChart',
        label: '基础柱状图',
    },
    {
        value: 'negativeBarChart',
        label: '交错正负轴',
    },
    {
        value: 'stackedBarChart',
        label: '堆叠柱状图',
    }, {
        value: 'nightingaleChart',
        label: '南丁格尔玫瑰图',
    },
    {
        value: 'scrollLegendPieChart',
        label: '滚动图例',
    }
]

const options = [
    {
        value: 'lineChart',
        label: '折线图',
        children: [
            {
                value: 'basicLineChart',
                label: '基础折线图',
            }]
    },
    {
        value: 'barChart',
        label: '柱状图',
        children: [
            {
                value: 'basicBarChart',
                label: '基础柱状图',
            },
            {
                value: 'negativeBarChart',
                label: '交错正负轴',
            },
            {
                value: 'stackedBarChart',
                label: '堆叠柱状图',
            }]
    },
    {
        value: 'pieChart',
        label: '饼图',
        children: [
            {
                value: 'nightingaleChart',
                label: '南丁格尔玫瑰图',
            },
            {
                value: 'scrollLegendPieChart',
                label: '滚动图例',
            }]
    }]

const { chartDom, setOption } = useEcharts(chartOptions.stackedBarChart);

</script>

<style scoped lang="scss">
.frame {
    height: 100%;
    display: flex;
    flex-direction: column;

    .echart {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;


        div {
            // margin: 5% auto;
            width: 80%;
            height: 80%;
        }
    }
}
</style>